
<script type="text/javascript">
	function merge(main,sub) {
		for(var x =0; x<sub.length;x++){
			for (var y =0 ;y<main.length;y++){
				if(main[y].name==sub[x].name){
					for(k in sub[x]){
						main[y][k]=sub[x][k]
					}
					break
				}
			}
		}
	}
</script>

<script for='first-page' type="text/javascript" >
	//fields=[
	//	{name:'logo',type:'logo',label:'Logo',required:true},
	//	{name:'link_ios',type:'text',label:'Link to IOS',required:true},
	//	{name:'link_gp',type:'text',label:'Link to GooglePlay',required:true},
	//	{name:'link_face',type:'text',label:'Link to FaceBook'},
	//	{name:'link_twit',type:'text',label:'Link to Twitter'},
	//	{name:'slogan',type:'text',label:'Slogan'},
	//	{name:'dsp',type:'area',label:'Introduction',required:true},
	//	{name:'email',type:'text',label:'Contact us email',required:true},
	//	{name:'ga_key',type:'text',label:'Google Analytics Key',required:true},
	//	{name:'policy',type:'area',label:'Private policy'},
	//	{name:'copyright',type:'text',label:'Copyright',required:true},
	//	{name:'deploy_account',type:'field-input',label:'Deploy Account'},
	//	{name:'domain',type:'text',label:'Domain'},
	//	{name:'code_inject',type:'area',label:'Code Injection into Header'}
	//];
	fields={{heads | safe }}
	fix = [{name:'logo',type:'logo'}]
	merge(fields,fix)
	

	var page1=Vue.component('first-page',{
		template:'#first-page',
		data:function () {
			return {
				studio:studio,
				errors:errors,

			}
		},
		props:['editable'],
		methods:{

			error_data:function (name) {
				if(this.errors[name]){
					return this.errors[name]
				}
				else{
					return ''
				}
			}
		// 	update_errors:function (errors) {
		// 		for(k in errors){
		// 			Vue.set(this.errors,k,errors[k]);
		// 			//this.$set('errors')
		// 		}
		// 	}
		 }
	})
</script>

<template id='first-page'>
	<div>
		<!--<button name="test" type="button" value="val" @click='mock()'>Button Text</button>-->
		
		<div class='_row'>
			<h2 class='row-title'>Image Choice</h2>
			<div style="display:inline-block;margin-right:30px;">
				<label for="id_for_logo">Studio Logo<span class="req_star"> *</span></label>
				<logo-input id="id_for_logo" :img_url.sync='studio.logo' :up_url="'/studio/upload/logo/?studio='+ studio.name"></logo-input>
				
			</div>
			
			<div style="display:inline-block">
				<label for="id_for_fav">Favicon</label>
				<logo-input id='id_for_fav' :img_url.sync='studio.favicon' :up_url="'/studio/upload/favicon/?studio='+ studio.name"></logo-input>
			</div>
			<div v-text='error_data("logo")' class='error'></div>
			<!--<button @click='$refs.logo.upload()' :disabled='!$refs.logo.ready' class="up_btn">Upload Logo Image</button>-->
			
			<div class="interval"></div>
		</div>

		<div class='_row'>
			<h2 class='row-title'>Basic Information</h2>
			<div class='cell'>
				<field name='link_ios'>
					<div>this is link to apple store</div>
				</field>
				<field name='link_gp'></field>
				<field name='link_face'></field>
				<field name='link_twit'></field>
			</div>
			<div class='cell'>
				<field name='slogan'></field>
				<field name='dsp'></field>
			</div>
		</div>

		<div class='_row'>
			<h2 class='row-title'>Other</h2>
			<div class='cell'>
				<field name='email'></field>
				<field name='ga_key'></field>
				<field name='copyright'></field>
			</div>

			<div class='cell'>
				<field name='policy'></field>
			</div>
		</div>


		
	</div>
	
</template>

<script type="text/javascript">
	Vue.component('field',{
		template:'#field',
		props:['name'],
		data:function () {
			return {
				fields:fields,
				studio:studio,
				errors:errors
			}
		},
		beforeCompile:function () {
			for(i in fields){
				if(fields[i].name==this.name){
					this.item=fields[i];
					break
				}
			}
		},
		components:{
			text:{
				props:['name'],
				template:'<input type="text">'
			},
			area:{
				props:['name'],
				template:'<textarea rows="10" cols="10" ></textarea>'
			},
			//choice:{
			//	props:['name','options'],
				//template:"<select><option v-for='option in options' :value='get_value(option)'>[[get_label(option)]]</option></select>"
			//}
		},
		methods:{
			error_data:function (name) {
				if(this.errors[name]){
					return this.errors[name]
				}
				else{
					return ''
				}
			}
		}
	});
</script>
<!--:options='options'-->
<template id='field'>
	<div for='field' class="fieldWrapper" :class='{"error":error_data(name)}'>
	    <label for="[['id_'+name]]">[[item.label]]<span class="req_star" v-if='item.required'> *</span></label>
	    <component :is='item.type' 
	    	v-model='studio[name]'
	    	:name='name' 
	    	id="[['id_'+name]]"
	    	v-if='item.type!="field-input"'>
	    	</component> 
	    <slot name='field-input'></slot>
		<div v-text='error_data(name)' class='error'></div>
		<slot></slot>
		<div class="interval"></div>
	</div>
	
</template>

<!-----------------------logo-input---------------------------->
<script for='logo-input' type="text/javascript">

	Vue.component('logo-input',{
		template:'#logo-input',
		props:['up_url','img_url','id'],
		methods:{
			clear:function () {
				this.img_url=''
				$('#'+this.id).val('')
			}
		}
	})

</script>

<template id='logo-input'>
	<div class='up_wrap'>
		<file-loader :id='id'
			accept='image/gif,image/jpeg,image/png' 
			:upload_url='up_url'
			:url.sync= 'img_url' 
			class='logo-input'>
		</file-loader>
		<div style="padding: 40px">
			<a class='choose'>Choose</a>
		</div>
		<div v-if='img_url' class="closeDiv">
			<div class="close" @click='clear()'>X</div>
			<img :src="img_url" alt="" class="logoImg">
		</div>
	</div>
</template>



<style type="text/css" media="screen" v-if='is_first'>
	.up_wrap{
		position: relative;
		text-align: center;
		border: 2px dashed #ccc;
		background: #FDFDFD;
		width:300px;
	}
	.logo-input{
		opacity: 0;
		position: absolute;
		top: 40px;
		left: 40px;
		display: block;
		cursor: pointer;
	}
	.closeDiv{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
	}
	.choose{
		display: inline-block;
		text-decoration: none;
		padding: 5px;
		border: 1px solid #0092F2;
		border-radius: 4px;
		font-size: 14px;
		color: #0092F2;
		cursor: pointer;
	}
	.choose:hover,.choose:active{
		text-decoration: none;
		color: #0092F2;
	}
	.close{
		position: absolute;
		top: 5px;
		right: 10px;
		cursor: pointer;
		font-size: 14px;
		color: #242424;
	}
	.logoImg{
		max-height: 100px !important;
		vertical-align: middle;
		margin-top: 5px;
	}
	.req_star{
		color: red;
		font-size: 200%;
	}
</style>

<!-------------------file-loader---------------------->
<script for='file-loader' type="text/javascript">


	Vue.component('file-loader',{
		template:"<input model='filebody' type='file' @change='changed'>",
		props:{
				upload_url:{
					type: String,
					required: true
				},
				url:{
					type: String,
					twoWay:true
				},
				ready:{}
			},
		methods:{
			changed:function (changeEvent) {
				var file=changeEvent.target.files[0];
				if(!file)
					return
				this.fd = new FormData();
				this.fd.append('file', file);
				this.ready=true;
				this.upload()
			},
			upload:function () {
				var self =this;
				$.ajax({
					url:this.upload_url,
					type:'post',
					data:this.fd,
					contentType: false,
					cache: false,
					success:function (data) {
						//alert(data);
						self.url=data.url;
						//self.$emit('url.changed',data.url)
					},
					//error:function (data) {
					//	alert(data.responseText)
					//},
					processData:false
				})
			}
		}
	});
	//<button @click='upload'>upload</button><img v-show='url' :src='url' >
</script>
